<template>

    <div style="width: 100%;background-color: #f6f6f6" v-if="isShow">
        <div class="datu"></div>

        <div class="xinwen_center">
            <div class="xinwen_title">一&nbsp;&nbsp;新闻中心&nbsp;&nbsp;一</div>

            <ul>
                <li v-for="(item,index) in dataList" :key="item.id" @click="isShow = !isShow">
                    <div class="content_left">
                        <div class="item_id">{{item.id}}</div>
                        <div class="item_message">{{item.title}}</div>
                    </div>
                    <div class="content_right">{{item.time}}</div>
                </li>
            </ul>

            <div class="fen_ye">
                <el-pagination
                        background
                        layout="pager"
                        :total="70"
                        @current-change="current_change(current_page)"
                        v-model:currentPage="current_page"
                        @click="test(current_page)">
                </el-pagination>
            </div>

        </div>

        <dibu></dibu>

    </div>

    <div v-else="isShow">
        <xinwendetail></xinwendetail>
    </div>

</template>

<script>
    import {ref} from 'vue'
    import dibu from '../../components/dibu.vue'
    import xinwendetail from '../../components/xinwen_detail.vue'
    export default {
        name: "xinwenzhongxin",
        components:{
            dibu,
            xinwendetail,
        },
        setup(){

            const isShow=ref(true)

            const dataList=ref([
                {
                    id:1,
                    title:"高频焊机优点及适用范围",
                    time:"2021-06-16",
                },
                {
                    id:2,
                    title:"高频焊机优点及适用范围",
                    time:"2021-06-16",
                },
                {
                    id:3,
                    title:"高频焊机优点及适用范围",
                    time:"2021-06-16",
                },
                {
                    id:4,
                    title:"高频焊机优点及适用范围",
                    time:"2021-06-16",
                },
                {
                    id:5,
                    title:"高频焊机优点及适用范围",
                    time:"2021-06-16",
                },
                {
                    id:6,
                    title:"高频焊机优点及适用范围",
                    time:"2021-06-16",
                },

            ]);

            return{
                dataList,
                isShow,
            }
        }
    }
</script>

<style scoped>
    .datu{height: 339px;width: 100%;background: url("http://120.78.80.190/wxby.png");}
    .xinwen_center{width: 1179px;margin: 0px auto;}
    .xinwen_title{height: 44px;width: 359px;margin: 0px auto;font-size: 44px;line-height: 44px;margin-top: 83px;color: #0c4da1;}
    .xinwen_center>ul{width: 100%;margin: 0px auto;margin-top: 57px;}
    .xinwen_center>ul>li{width: 100%;height: 53px;display: flex;flex-direction: row;justify-content: space-between;border-bottom: 1px solid #e8e8e8;cursor: pointer;}
    .content_left{display: flex;flex-direction: row;}
    .item_id{width: 27px;height: 27px;background-color: #cdcdcd;margin-top: 11px;margin-left: 21px;font-size: 13px;line-height: 27px;text-align: center;color: white;}
    .item_message{margin-left: 20px;font-size: 23px;line-height: 53px;}
    .content_right{font-size: 17px;line-height: 53px;margin-right: 12px;color: #828282;}
    .fen_ye{width: 200px;margin: 0px auto;margin-top: 78px;margin-bottom: -40px;}
</style>